<template>
  <div class="addposiman">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="请输入预置位名称:" prop="qxbh">
            <el-input
              v-model="formData.positionName"
              placeholder
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属分组:" prop="dydj">
            <el-select
              v-model="formData.sbid"
              size="small"
              filterable
              placeholder="请选择"
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <div class="addposiman-btn">
            <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
            <el-button class="table-query" type="primary" @click="closed">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class addposiman extends Vue {
  @Prop({ default: () => {} })
  yzw!: { [key: string]: any };
  // form表单数据
  formData = {
    sbid: "",
    positionName: "",
  };
  // 所属分组
  options = [];
  // 验证
  rules = {};
  // 新增预置位获取设备分组
  getDeviceGroup() {
    // console.log(this.yzw);
    let myBdzId = this.yzw.myBdzId || "";
    myBdzId = myBdzId.split("#")[0];
    let data = {
      stationId: myBdzId,
    };
    (this as any).$services
      .getDeviceGroup({ data })
      .then((result: any) => {
        this.options = result.data || [];
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  $refs!: {
    elForm: any;
  };
  mounted() {
    this.getDeviceGroup();
  }
  //创建
  closed() {
    this.$emit("closed");
  }
  // 添加预置位
  addPosition() {
    let from = {
      id: this.yzw.id,
      positionName: this.formData.positionName,
      sbid: this.formData.sbid,
    };
    (this as any).$services
      .addPosition({ data: from, method: "post", postparams: true })
      .then((result: any) => {
        if (result.data === "0") {
          this.$message.warning("添加预置位失败！");
        } else {
          this.$emit("setYzw", result.data);
          this.closed();
          this.$message.success("添加预置位成功！");
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 提交
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      // TODO 提交表单
      this.addPosition();
      // console.log(this.formData);
      // this.$emit("close");
    });
  }
}
</script>

<style lang="scss" scoped>
.addposiman {
  width: 100%;
  // height: 400px;
  &-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

